<template>
  <div>
    <div id='maingh'>
    </div>
    <p style="font-size:0.4rem;">force01</p>
  </div>

</template>

<script>
  export default {
    name: 'force01',
    props:['datas'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        tabledata:[],
        tabledataya:[],
        tabledatayb:[],
        tabledatayc:[],
        tabledatayd:[],
        tabledataye:[],

      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading()
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        that.tabledata=that.datas;
        let ag=that.tabledata;
        console.log(that.tabledata)
        that.tabledataya=[];//这是柱状图的数据,例:10
        that.tabledatayc=[];//这是y轴显示百分比的地方,例:10%
        that.tabledatayb=[];//这是y轴显示时间的地方,例：2h18
        that.tabledatayd=[];//这是y轴显示类目名称,例：'深睡眠'
        that.tabledataye=[];//这是散点图数据

        let ac="";
        for(var i=0;i<ag.length;i++){
          that.tabledataya.push(ag[i].ya)//这是柱状图的数据
          that.tabledatayb.push(ag[i].yc)//这是y轴显示时间的地方
          that.tabledatayd.push(ag[i].yb)//这是y轴显示类目名称
          // ac=parseInt(ag[i].yd.a2-ag[i].yd.a1)/2+parseInt(ag[i].yd.a1);
          // if(ac=='0'){
          //   ac='-'
          // }
          // if(ag[i].yd.a2=='100'){
          //   ac=ag[i].yd.a2-ag[i].yd.a1
          // }
          that.tabledataye.push(ag[i].yd.a1);//这是透明散点图数据

          that.tabledatayc.push(ag[i].yd.a2)//这是y轴显示百分比的地方
        }
        console.log(that.tabledatayf)

      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){
        this.getLoading()
        // 基于准备好的dom，初始化echarts实例,采用svg渲染
        var myChart = this.$echarts.init(document.getElementById('maingh'),null, {renderer: 'svg'});
        app.title = '堆叠条形图';

        var option = {
          title: {
            text: '阶梯瀑布图',
            subtext: 'From ExcelHome',
            sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
          },
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
              var tar;
              if (params[1].value != '-') {
                tar = params[1];
              }
              else {
                tar = params[0];
              }
              return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
            }
          },
          legend: {
            data:['支出','收入']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type : 'category',
            splitLine: {show:false},
            data :  function (){
              var list = [];
              for (var i = 1; i <= 11; i++) {
                list.push('11月' + i + '日');
              }
              return list;
            }()
          },
          yAxis: {
            type : 'value'
          },
          series: [
            {
              name: '辅助',
              type: 'bar',
              stack: '总量',
              itemStyle: {
                normal: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                }
              },
              data: this.tabledataya,
            },
            {
              name: '收入',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'

                }
              },
              itemStyle: {
                normal: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                }
              },
              data: this.tabledatayc,
            },
            {
              name: '支出',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'bottom'
                }
              },
              data: this.tabledataye,
            }
          ]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  #maingh{
    width:100%;height:4rem;float:left;-webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
